<template>
  <div class="container" @click="handleClick">
    <HeaderBar></HeaderBar>
  <div class="main">
    <keep-alive>
    <router-view></router-view>
    </keep-alive>
  </div>
  <ul class="nav">
    <router-link active-class="active" to="/home/movie" tag="li">
      <span class="iconfont">&#xe8ae;</span>
      电影/影院
    </router-link>

    <router-link active-class="active" to="/home/video" tag="li">
      <span class="iconfont">&#xe67a;</span>
      视频
    </router-link>

    <router-link active-class="active" to="/home/shortvideo" tag="li">
      <span class="iconfont">&#xe655;</span>
      小视频
    </router-link>

    <!-- <router-link active-class="active" to="/show.html"  tag="li">
       <span class="iconfont">&#xe8af;</span>
      演出
    </router-link> -->

    <li active-class="active" @click="goShow()">
       <span class="iconfont">&#xe8af;</span>
      演出
    </li>

    <router-link active-class="active" to="/home/my" tag="li">
       <span class="iconfont">&#xe76e;</span>
      我的
    </router-link>
  </ul>
  </div>


</template>

<script>
import HeaderBar from "../../components/HeaderBar"
import Movie from "./movie/Movie"
import "@/assets/iconfont/iconfont.css"

export default {
  components: {
    HeaderBar,
    Movie
  },
  methods:{
    goShow(){
      location.href='/show.html';
    },
    handleClick(){
      this.$store.commit('setMenu',false)
    }
  }
}
</script>


<style lang="scss" scoped>

@import "@/assets/style/mixin.scss";

.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .main {
    flex:1;
    overflow: hidden;
  }

  .nav{
    box-sizing: border-box;
    height: 48px;
    display: flex;
    padding-top:5px;
    @include border1px(#666666);
    li{
      list-style: none;
      flex:1;
       display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      font-size: 10px;
      color:#696969;
      span{
        font-size: 25px;
      }
    }

    .active{
      color: #f03d37;
    }
  }
}

</style>


